import React from 'react';
import { Modal, Form, Select, Input, Radio } from 'antd';
import styles from './style.less';

const formLayout = { labelCol: { span: 7 }, wrapperCol: { span: 13 } };
const FormItem = Form.Item;
const { Option } = Select;

@Form.create()
export default class AdminActionModal extends React.PureComponent {
  static defaultProps = {
    title: '编辑',
    visible: false,
    confirmLoading: false,
    onOk: () => {},
    onCancel: () => {},
    modalAction: '',
    data: {},
    menuList: [],
  };

  handleOk = () => {
    const { form, onOk } = this.props;
    form.validateFields((errors, values) => {
      if (errors) return;
      onOk(values);
    })
  };

  getModalContent = () => {
    const { form, modalAction, data, menuList } = this.props;
    if (modalAction === 'Add' || modalAction === 'Edit') {
      return (
        <>
          <FormItem {...formLayout} label="上级菜单">
          {form.getFieldDecorator('type', {
            initialValue: data.type || 'MENU',
          })(
            <Radio.Group>
              <Radio value="MENU">菜单</Radio>
              {/* <Radio value="BUTTON">按钮</Radio> */}
            </Radio.Group>,
          )}
          </FormItem>
          <FormItem {...formLayout} label="上级菜单">
            {form.getFieldDecorator('parentId', {
              initialValue: data.parentId || 0,
              rules: [
                { required: true, message: '上级菜单不能为空' },
              ],
            })(
              <Select style={{ width: '100%' }} placeholder="请选择">
                <Option value={0}>顶级菜单</Option>
                {menuList.map(menu => <Option key={menu.id} value={menu.id}>{menu.name}</Option>)}
              </Select>,
            )}
          </FormItem>
          <FormItem {...formLayout} label="名称">
            {form.getFieldDecorator('name', {
              initialValue: data.name,
              rules: [
                { required: true, message: '名称不能为空' },
              ],
            })(<Input />)}
          </FormItem>
          <FormItem {...formLayout} label="编号">
            {form.getFieldDecorator('code', {
              initialValue: data.code,
              rules: [
                { required: true, message: '编号不能为空' },
              ],
            })(<Input />)}
          </FormItem>
        </>
      );
    }
    return <></>
  };

  render() {
    const { title, visible, confirmLoading, onCancel } = this.props;
    return (
      <Modal
        title={title}
        className={styles.standardListForm}
        width={640}
        destroyOnClose
        maskClosable={false}
        visible={visible}
        confirmLoading={confirmLoading}
        onOk={this.handleOk}
        onCancel={onCancel}
      >
        {this.getModalContent()}
      </Modal>
    )
  }
}
